<script setup lang="ts">
import {computed} from "vue"
import compHeader from "./header.vue"
import compPanel from "./panel.vue"
import { useCurrentData } from "@/store/processFlow"
//
const currentData = useCurrentData();
const processList = computed(() => currentData.processList)
//
const isDetail = computed(() => currentData.isDetail)
const activeItem = computed(() => currentData.activeItem)
// /nifi/group?processGroupId=0d475669-018a-1000-b898-4be99f56952c&componentIds=
</script>

<template>
  <div h-full relative bg-white>
    <!-- header -->
    <comp-header h-122 v-if="!isDetail"></comp-header>
    <!-- panel -->
    <div class="_panel" v-if="!isDetail">
        <div h-full p-x-16 box-border overflow-auto>
          <comp-panel class="_panel-item" v-for="d in processList" :key="d.id" :data="d"></comp-panel>
        </div>
      <!-- <iframe w-full h-full overflow-hidden  src="/nifi-page/nifi/group"></iframe> -->
    </div>
    <div v-if="isDetail" w-full h-full>
      <iframe w-full h-full b-none :src="`/nifi-page/nifi/group?processGroupId=${activeItem.id}&componentIds=`"></iframe>
    </div>
  </div>
</template>

<style lang="scss" scoped>
._panel{
  height:calc(100% - 122px);
  ._panel-item{
    transition:all .5s;

  }
}
</style>